<ul class="list-group">
    <li class="list-group-item">
        <a href="javascript:;"> <span>表格标题</span> <i class="fd-view-drag ti-move pull-right"></i></a>
        <div class="view hide">
            <div id="v_formtitle" fd-view class="bb h4"><h4 fd-view="formtitle">表单标题</h4></div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="javascript:;"> <span>表格</span> <i class="fd-view-drag ti-move pull-right"></i></a>
        <div class="view hide">
            <table id="v_table" fd-view="table" class="table table-bordered">
                #foreach($!i in [1..3])
                <tr>
                    #foreach($!j in [1..4])
                    <td fd-view="table_td" class="fd-view-drag-in" style="width:25%;" data="{'style':'width:25%'}"><br></td>
                    #end
                </tr>
                #end
            </table>
        </div>
    </li>
    <li class="list-group-item">
        <a href="javascript:;"> <span>栅格 1-1</span> <i class="fd-view-drag ti-move pull-right"></i></a>
        <div class="view hide">
            <div class="row" contenteditable="true" fd-view="col12" id="v_col12">
                <div class="col-md-12 fd-view-drag-in fd-view-bordered"></div>
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="javascript:;"> <span>栅格 1/2</span> <i class="fd-view-drag ti-move pull-right"></i></a>
        <div class="view hide">
            <div class="row" contenteditable="true" fd-view="col66" id="v_col66">
                <div class="col-md-6 fd-view-drag-in fd-view-bordered"></div>
                <div class="col-md-6 fd-view-drag-in fd-view-bordered"></div>
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="javascript:;"> <span>栅格 1/3</span> <i class="fd-view-drag ti-move pull-right"></i></a>
        <div class="view hide">
            <div class="row" contenteditable="true" fd-view="col444" id="v_col444">
                <div class="col-md-4 fd-view-drag-in fd-view-bordered"></div>
                <div class="col-md-4 fd-view-drag-in fd-view-bordered"></div>
                <div class="col-md-4 fd-view-drag-in fd-view-bordered"></div>
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="javascript:;"> <span>栅格 1/4</span> <i class="fd-view-drag ti-move pull-right"></i></a>
        <div class="view hide">
            <div class="row" contenteditable="true" fd-view="col3333" id="v_col3333">
                <div class="col-md-3 fd-view-drag-in fd-view-bordered"></div>
                <div class="col-md-3 fd-view-drag-in fd-view-bordered"></div>
                <div class="col-md-3 fd-view-drag-in fd-view-bordered"></div>
                <div class="col-md-3 fd-view-drag-in fd-view-bordered"></div>
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="javascript:;"> <span>折叠面板</span> <i class="fd-view-drag ti-move pull-right"></i></a>
        <div class="view hide">
            <div class="row" contenteditable="true" fd-view="collapsePanel" id="v_collapsePanel">
                <div class="p10">
                    <div id="header" class="bordered">
                        标题
                        <div class="pull-right">
                            <a href="javascript:;" id="handler"><i class="ti-arrow-circle-up"></i></a>
                        </div>
                    </div>
                    <div id="content" class="bl br bb fd-view-drag-in"></div>
                </div>
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="javascript:;"> <span>动态面板</span> <i class="fd-view-drag ti-move pull-right"></i></a>
        <div class="view hide">
            <div class="row" contenteditable="true" fd-view="dynamicPanel" id="v_cynamicPanel">
                <div class="p10">
                    <div id="header" class="bordered">
                        标题
                        <div class="pull-right">
                            <a href="javascript:;" id="handler" style="cursor: pointer;"><i class="ti-plus"></i> 添加</a>
                        </div>
                    </div>
                    <div id="content" class="bl br bb p10">
                        <div class="item mb5">
                            <table style="width:100%">
                                <tr>
                                    <td style="width:99%">
                                        <div class="fd-view-drag-in"></div>
                                    </td>
                                    <td><a id="closer" class="hide" style="cursor: pointer;"><i class="ti-close"></i> </a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <a href="javascript:;"> <span>横向线条</span> <i class="fd-view-drag ti-move pull-right"></i></a>
        <div class="view hide">
            <hr fd-view="line"/>
        </div>
    </li>
    <li class="list-group-item">
        <a href="javascript:;"> <span>换行符</span> <i class="fd-view-drag ti-move pull-right"></i></a>
        <div class="view hide">
            <br fd-view="br"/>
        </div>
    </li>
</ul>